<template>
  <div>
    <el-card>
      <el-form :inline="true" :model="pageData">
        <el-form-item label="字典名称">
          <el-input
            v-model="pageData.dictName"
            placeholder="请输入字典名称"
            clearable
            @keyup.enter="getTableData"
          />
        </el-form-item>
        <el-form-item label="字典编码">
          <el-input
            v-model="pageData.dictCode"
            placeholder="请输入字典编码"
            clearable
            @keyup.enter="getTableData"
          />
        </el-form-item>
        <el-form-item label="状态">
          <el-select
            v-model="pageData.status"
            placeholder="请选择状态"
            clearable
            @keyup.enter="getTableData"
          >
            <el-option
              v-for="item in statusArr"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </el-form-item>
        <el-form-item>
          <commonBtn
            :value="'搜索'"
            :type="'primary'"
            :icon="'search'"
            :plain="true"
            @click="getTableData"
          ></commonBtn>
          <commonBtn
            :value="'重置'"
            :icon="'refresh'"
            @click="clearForm"
          ></commonBtn>
        </el-form-item>
      </el-form>
      <el-row>
        <commonBtn
          :value="'新增'"
          :type="'primary'"
          :icon="'plus'"
          :plain="true"
          @click="addType"
        ></commonBtn>
        <commonBtn
          :value="'删除'"
          :type="'danger'"
          :icon="'delete'"
          :plain="true"
          :disabled="delBatchIds.length === 0"
          @click="delBatch"
        ></commonBtn>
      </el-row>
      <el-table
        :data="tableData"
        @selection-change="handleSelectionChange"
        ref="multipleTableRef"
        v-loading="isLoad"
      >
        <el-table-column type="selection" width="55" class="center" />
        <el-table-column label="编号" align="center" show-overflow-tooltip>
          <template #default="scope">
            {{ (pageData.current - 1) * pageData.size + scope.$index + 1 }}
          </template>
        </el-table-column>
        <el-table-column
          prop="dictName"
          label="字典名称"
          align="center"
          show-overflow-tooltip
        ></el-table-column>
        <el-table-column
          prop="dictCode"
          label="字典编码"
          align="center"
          show-overflow-tooltip
        >
          <template #default="scope">
            <!-- :href="'/pages/dictValue?id=' + scope.row.id" -->
            <el-link
              href="javascript:void(0)"
              :underline="false"
              @click="transRouter(scope.row.id)"
              >{{ scope.row.dictCode }}</el-link
            >
          </template>
        </el-table-column>
        <el-table-column label="状态" align="center">
          <template #default="scope">
            <el-tag v-if="scope.row.status == '0'">正常</el-tag>
            <el-tag type="danger" v-if="scope.row.status == '1'">禁用</el-tag>
          </template>
        </el-table-column>
        <el-table-column
          prop="dictRemark"
          label="备注"
          align="center"
          show-overflow-tooltip
        ></el-table-column>
        <el-table-column
          prop="createTime"
          label="创建时间"
          align="center"
          show-overflow-tooltip
        ></el-table-column>
        <el-table-column label="操作" fixed="right" align="center">
          <template #default="scope">
            <editBtn :value="'编辑'" @click="editType(scope.row)" />
            <delBtn :value="'删除'" @click="delOne(scope.row.id)" />
          </template>
        </el-table-column>
      </el-table>
      <pag :showPage="true" :pageData="pageData" @getTableData="getTableData" />
    </el-card>
    <addEdit :layer="layer" @getTableData="getTableData" v-if="layer.show" />
  </div>
</template>
<script>
import pag from "_c/pag/index.vue";
import { defineComponent, reactive, ref, getCurrentInstance } from "vue";
import commonBtn from "_c/commonBtn/index.vue";
import editBtn from "_c/editBtn/index.vue";
import delBtn from "_c/delBtn/index.vue";
import addEdit from "./addEdit.vue";
import { getDictTypeData, delBatchByIds } from "@/api/dictType.js";
import { ElMessage, ElMessageBox } from "element-plus";
import { statusArr } from "../enum";
import { useRouter } from "vue-router";
export default defineComponent({
  name: "dictValueTable",
  components: {
    commonBtn,
    editBtn,
    delBtn,
    pag,
    addEdit,
  },
  setup() {
    const router = useRouter();
    //表格加载
    const isLoad = ref(true);
    // 弹窗控制器
    const layer = reactive({
      show: false,
      title: "新增",
      showButton: true,
      width: 500,
    });
    //this指向
    const { proxy } = getCurrentInstance();
    //需要批量删除的数据id集合
    const delBatchIds = ref([]);
    //响应分页数据
    const pageData = reactive({
      dictName: "",
      dictCode: "",
      status: "",
      current: 1,
      size: 10,
      total: 0,
    });
    //分页数据
    const tableData = ref([]);
    //获取表格数据
    const getTableData = async () => {
      // 分页参数, 供table使用
      let params = {
        pageNum: pageData.current,
        pageSize: pageData.size,
        dictName: pageData.dictName.trim() || undefined,
        dictCode: pageData.dictCode.trim() || undefined,
        status: pageData.status.trim() || undefined,
      };
      const { data, success } = await getDictTypeData(params);
      if (success) {
        tableData.value = data.records;
        pageData.total = parseInt(data.total);
        isLoad.value = false;
      }
    };
    //多选
    const handleSelectionChange = (val) => {
      delBatchIds.value = [];
      if (val.length == 0) {
        return;
      }

      for (let i = 0; i < val.length; i++) {
        delBatchIds.value.push(val[i]["id"]);
      }
    };
    //确认批量删除
    const confirmEvent = async () => {
      //todo 调用批量删除接口
      const { success } = await delBatchByIds(delBatchIds.value);
      if (success) {
        delBatchIds.value = [];
        ElMessage.success("操作成功");
        getTableData();
      }
    };
    //路由跳转
    const transRouter = (id) => {
      if (id) {
        router.push({ path: "/pages/dictValue", query: { id: id } });
      }
    };
    //清除搜索表单数据
    const clearForm = () => {
      pageData.dictName = "";
      pageData.dictCode = "";
      pageData.status = "";
      getTableData();
    };
    //新增字典
    const addType = () => {
      layer.title = "新增字典";
      layer.show = true;
      delete layer.row;
    };
    //编辑字典
    const editType = (row) => {
      layer.title = "编辑字典";
      layer.show = true;
      layer.row = row;
    };
    //单个删除
    const delOne = (id) => {
      if (id) {
        delBatchIds.value = [];
        delBatchIds.value.push(id);
        ElMessageBox.confirm("您确认要删除该条数据？", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        })
          .then(() => {
            confirmEvent();
          })
          .catch(() => {
            ElMessage.info("取消成功！");
          });
      }
    };
    //批量删除
    const delBatch = () => {
      if (delBatchIds.value.length > 0) {
        ElMessageBox.confirm("您确认要删除这些数据？", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        })
          .then(() => {
            confirmEvent();
          })
          .catch(() => {
            proxy.$refs["multipleTableRef"].clearSelection();
            ElMessage.info("取消成功！");
          });
      }
    };
    onMounted: {
      getTableData();
    }
    return {
      isLoad,
      layer,
      statusArr,
      delBatchIds,
      tableData,
      pageData,
      clearForm,
      transRouter,
      getTableData,
      handleSelectionChange,
      addType,
      editType,
      delOne,
      delBatch,
    };
  },
});
</script>
<style lang="scss" scoped>
.el-form {
  display: flex;
  justify-content: left;
}
.el-table {
  margin-top: 15px;
}
.el-link {
  color: #337ab7;
}
</style>
